<template>
  <div class="schools">
    <div class="schools-nav">
      <div :style="{ background: tabIndex == 0 ? '#e9efff' : '' }" class="schools-nav-left" @click="changeNav(0)">最新资讯
      </div>
      <div :style="{ background: tabIndex == 1 ? '#e9efff' : '' }" class="schools-nav-left" @click="changeNav(1)">推荐资讯
      </div>
    </div>
    <div class="schools-wrap-box">
      <div class="schools-wrap" @click="goToZX(item.id)" v-for="item in info" :key="item.name">
        <consultationProject :background="false" :icon="false" :introduce="item"></consultationProject>
      </div>
      <div class="look-more" @click="LookMore">{{ text }}</div>
    </div>
  </div>
</template>

<script setup>

import { getArticleList } from '../../../api/apiList/homePage.js';
import { onMounted, ref, defineProps,defineEmits } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const text = ref('加载更多')
const emit = defineEmits(['sendValue'])
import consultationProject from '../../homePage/components/consultationProject.vue';
const props = defineProps({
  id: String
});
const tabIndex = ref(0)
let info = ref([]);
let page = ref(1);
onMounted(async () => {
  await loadList(0, 1)
});

const changeNav = (index) => {
  tabIndex.value = index;
  info.value = []
  loadList(index)
}

const LookMore = () => {
  if (text.value == '加载更多') {
    text.value = '正在加载中...'
    page.value = page.value + 1
    loadList(tabIndex.value)
  } else {
    return
  }

}

const loadList = (index) => {
  getArticleList({
    type: props.id,
    page: page.value,
    limit: 6,
    is_recommend: index
  }).then((res) => {
    const { result } = res;
    emit('sendValue');
    if (result.length == 0) {
      text.value = '已加载全部'
    } else {
        text.value = '加载更多'
      info.value = info.value.concat(result)
    }

  });
}
const goToZX = (id) => {
  router.push({ path: '/InformationDetails', query: { id } });
};

const goback = () => {
  history.go(-1);
};

</script>

<style lang="less" scoped>
.schools {
  position: relative;
  background: #ffffff;
  margin-top: 70px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  // width: 398px;
  width: 100%;
}

.schools-nav {
  height: 47px;
  width: 100%;
  display: flex;
  background: #fff;
  border-radius: 30px;
  text-align: center;
  line-height: 47px;
  border: 2px solid #e9efff;

  .schools-nav-left {
    flex: 1;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
    width: 5.21739rem;
    border-radius: 30px;
  }
}

.schools-wrap-box {
  .schools-wrap {
    margin-top: 10px;
  }

  .look-more {
    font-size: 15px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(153, 153, 153, 0.5);
    line-height: 21px;
    text-align: center;
    margin-top: 10xp;
    padding-bottom: 20px;
  }
}


.san-box {
  .san-box-wrap {
    position: relative;
    height: 99px;
    background: #fbe9ce;
    background-size: 100%;
    border-radius: 20px;
    margin-top: 10px;
    display: flex;
    align-items: center;

    .san-box-wrap-left {
      flex: 0 0 77px;
      width: 77px;
      height: 77px;
      margin-right: 16px;
      margin-left: 12px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
      }
    }

    .san-box-wrap-right {
      .san-box-wrap-right-top {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 21px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 160px;
      }

      .san-box-wrap-right-bot {
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #3f3e3e;
        line-height: 18px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        padding-right: 30px;
      }
    }

    .san-box-wrap-top {
      position: absolute;
      top: 16px;
      right: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      padding: 4px 12px;
      line-height: 14px;
      border-radius: 11px;
      background: #ffffff;
    }
  }
}
</style>
